<template>
  <view class="clock-icon" :style="{ width: size + 'rpx', height: size + 'rpx' }">
    <view class="icon-bg" :style="{ backgroundColor: bgColor }">
      <view class="clock-face">
        <view class="hour-hand" :style="{ transform: `rotate(${hourAngle}deg)` }"></view>
        <view class="minute-hand" :style="{ transform: `rotate(${minuteAngle}deg)` }"></view>
        <view class="center-dot"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ClockIcon',
  props: {
    size: {
      type: Number,
      default: 48
    },
    bgColor: {
      type: String,
      default: '#667eea'
    }
  },
  
  data() {
    return {
      hourAngle: 0,
      minuteAngle: 0,
      timer: null
    }
  },
  
  mounted() {
    this.updateTime()
    this.timer = setInterval(() => {
      this.updateTime()
    }, 60000) // 每分钟更新一次
  },
  
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  
  methods: {
    updateTime() {
      const now = new Date()
      const hour = now.getHours() % 12
      const minute = now.getMinutes()
      
      this.hourAngle = (hour * 30) + (minute * 0.5)
      this.minuteAngle = minute * 6
    }
  }
}
</script>

<style scoped>
.clock-icon {
  display: inline-block;
}

.icon-bg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.clock-face {
  width: 70%;
  height: 70%;
  position: relative;
}

.hour-hand {
  position: absolute;
  width: 2rpx;
  height: 40%;
  background: #ffffff;
  top: 10%;
  left: 50%;
  margin-left: -1rpx;
  border-radius: 1rpx;
  transform-origin: 50% 90%;
}

.minute-hand {
  position: absolute;
  width: 1rpx;
  height: 50%;
  background: #ffffff;
  top: 0;
  left: 50%;
  margin-left: -0.5rpx;
  border-radius: 0.5rpx;
  transform-origin: 50% 100%;
}

.center-dot {
  position: absolute;
  width: 4rpx;
  height: 4rpx;
  background: #ffffff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -2rpx;
  margin-left: -2rpx;
}
</style>